<template>
  <view class="popup">

      <view class="popup-overlay" @click="clickMask" v-show="visible"></view>
      <view :class="visible?'isactive':'none'" class="popup-content " >
        <slot></slot>
      </view>

  </view>
</template>
<script setup>
const props = defineProps(
	{
		visible:{
				type:Boolean,// 类型为字符串
				// required:true,  // 是否必需传值（若必须传值却没有传，则控制台会给出警告）
				default:false   // 默认值
		}
	})
 
 const emits = defineEmits(["clickMask"])
 const clickMask = () => {
 		emits("clickMask", false)
 		console.log('命令已发送');
 		
 } 


</script>
<style lang="scss" scoped>
.popup {
	z-index:99999999;
  .popup-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0,0,0,0.5);
		z-index:99999999;
  }
  .popup-content {
		width: 100%;
		position: fixed;
		bottom: -100rpx;
		left: 0;
		background: #fff;
		// transform: translate3d(0, 100%, 0);
		transition: all 0.3s;
		z-index:99999999;
  }
	.isactive{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		// transition: transform  2s;
		transition: all 0.3s;
		z-index:99999999;
	}
}
</style>
